<script id="stylingTemp" type="text/x-kendo-template">
    <div class="card-columns">
        <div class="card mb-3">
            <h5 class="card-header">标题</h5>
            <div class="card-body text-center">
                <div class="k-h1">k-h1</div>
                <div class="k-h2">k-h2</div>
                <div class="k-h3">k-h3</div>
                <div class="k-h4">k-h4</div>
                <div class="k-h5">k-h5</div>
                <div class="k-h6">k-h6</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">醒目标题</h5>
            <div class="card-body text-center">
                <div class="k-display-1">k-display-1</div>
                <div class="k-display-2">k-display-2</div>
                <div class="k-display-3">k-display-3</div>
                <div class="k-display-4">k-display-4</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">显示</h5>
            <div class="card-body text-center clearfix">
                <div class="k-display-inline gray-bg">k-display-inline</div>
                <div class="k-display-block my-3 p-2 gray-bg">k-display-block</div>
                <div class="k-display-inline-block mb-3 p-2 gray-bg">k-display-inline-block</div>
                <div class="k-widget mb-3 p-2">k-display-none</div>
                <div class="k-widget mb-3 p-2">k-hidden</div>
                <div class="k-float-none mb-3 p-2 gray-bg">k-float-none</div>
                <div class="k-float-left mb-3 p-2 gray-bg">k-float-left</div>
                <div class="k-float-right mb-3 p-2 gray-bg">k-float-right</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">文字</h5>
            <div class="card-body">
                <div class="k-text-left py-1">k-text-left</div>
                <div class="k-text-right py-1">k-text-right</div>
                <div class="k-text-center py-1">k-text-center</div>
                <div class="k-text-lowercase py-1 text-center">k-text-lowercase</div>
                <div class="k-text-uppercase py-1 text-center">k-text-uppercase</div>
                <div class="k-text-capitalize py-1 text-center">k-text-capitalize</div>
                <div class="k-font-weight-light py-1 text-center">k-font-weight-light</div>
                <div class="k-font-weight-normal py-1 text-center">k-font-weight-normal</div>
                <div class="k-font-weight-bold py-1 text-center">k-font-weight-bold</div>
                <div class="k-text-nowrap py-1 text-center">k-text-nowrap</div>
                <div class="py-1 text-center">
                    k-text-ellipsis<span class="k-text-ellipsis k-display-inline-block align-middle w-5">...............</span>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">文字颜色</h5>
            <div class="card-body text-center">
                <div class="k-text-primary py-1">k-text-primary</div>
                <div class="k-text-info py-1">k-text-info</div>
                <div class="k-text-success py-1">k-text-success</div>
                <div class="k-text-warning py-1">k-text-warning</div>
                <div class="k-text-error py-1">k-text-error</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">背景颜色</h5>
            <div class="card-body text-center">
                <div class="k-bg-primary mb-2 p-2">k-bg-primary</div>
                <div class="k-bg-info mb-2 p-2">k-bg-info</div>
                <div class="k-bg-success mb-2 p-2">k-bg-success</div>
                <div class="k-bg-warning mb-2 p-2">k-bg-warning</div>
                <div class="k-bg-error mb-2 p-2">k-bg-error</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">状态颜色</h5>
            <div class="card-body text-center">
                <div class="k-state-primary k-widget mb-2 p-2">k-state-primary</div>
                <div class="k-state-info k-widget mb-2 p-2">k-state-info</div>
                <div class="k-state-success k-widget mb-2 p-2">k-state-success</div>
                <div class="k-state-warning k-widget mb-2 p-2">k-state-warning</div>
                <div class="k-state-error k-widget mb-2 p-2">k-state-error</div>
                <div class="k-info-colored k-widget mb-2 p-2">k-info-colored</div>
                <div class="k-success-colored k-widget mb-2 p-2">k-success-colored</div>
                <div class="k-error-colored k-widget mb-2 p-2">k-error-colored</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">提醒颜色</h5>
            <div class="card-body text-center">
                <div class="k-notification-info k-widget mb-2 p-2">k-notification-info</div>
                <div class="k-notification-success k-widget mb-2 p-2">k-notification-success</div>
                <div class="k-notification-warning k-widget mb-2 p-2">k-notification-warning</div>
                <div class="k-notification-error k-widget mb-2 p-2">k-notification-error</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">变量颜色</h5>
            <div class="card-body text-center">
                <div class="k-var--accent border mb-2 p-2">k-var--accent</div>
                <div class="k-var--accent-contrast border mb-2 p-2">k-var--accent-contrast</div>
                <div class="k-var--base border mb-2 p-2">k-var--base</div>
                <div class="k-var--background border mb-2 p-2">k-var--background</div>
                <div class="k-var--normal-background border mb-2 p-2">k-var--normal-background</div>
                <div class="k-var--normal-text-color border mb-2 p-2">k-var--normal-text-color</div>
                <div class="k-var--hover-background border mb-2 p-2">k-var--hover-background</div>
                <div class="k-var--hover-text-color border mb-2 p-2">k-var--hover-text-color</div>
                <div class="k-var--selected-background border mb-2 p-2">k-var--selected-background</div>
                <div class="k-var--selected-text-color border mb-2 p-2">k-var--selected-text-color</div>
                <div class="k-var--success border mb-2 p-2">k-var--success</div>
                <div class="k-var--info border mb-2 p-2">k-var--info</div>
                <div class="k-var--warning border mb-2 p-2">k-var--warning</div>
                <div class="k-var--error border mb-2 p-2">k-var--error</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">图表颜色</h5>
            <div class="card-body text-center">
                <div class="k-var--series-a border mb-2 p-2">k-var--series-a</div>
                <div class="k-var--series-b border mb-2 p-2">k-var--series-b</div>
                <div class="k-var--series-c border mb-2 p-2">k-var--series-c</div>
                <div class="k-var--series-d border mb-2 p-2">k-var--series-d</div>
                <div class="k-var--series-e border mb-2 p-2">k-var--series-e</div>
                <div class="k-var--series-f border mb-2 p-2">k-var--series-f</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">表单</h5>
            <div class="card-body text-center">
                <div class="mb-3">
                    <input class="k-textbox text-center w-100" type="text" value="k-textbox">
                </div>
                <div class="mb-3">
                    <textarea class="k-textarea text-center w-100">k-textarea</textarea>
                </div>
                <div class="mb-3">
                    <span class="k-textbox k-space-left w-100">
                        <input class="text-center" type="text" value="k-textbox k-space-left">
                        <a class="k-icon k-i-search" href="javascript:;"></a>
                    </span>
                </div>
                <div class="mb-3">
                    <span class="k-textbox k-space-right w-100">
                        <input class="text-center" type="text" value="k-textbox k-space-right">
                        <a class="k-icon k-i-search" href="javascript:;"></a>
                    </span>
                </div>
                <div class="mb-3">
                    <button class="k-button">k-button</button>
                </div>
                <div class="mb-3">
                    <button class="k-button k-primary">k-button k-primary</button>
                </div>
                <div class="mb-3">
                    <a href="javascript:;">Default Link</a>
                </div>
                <div class="mb-3">
                    <a class="k-button" href="javascript:;">a.k-button</a>
                </div>
                <div class="mb-3">
                    <a class="k-link" href="javascript:;">a.k-link</a>
                </div>
                <div class="mb-3 d-flex justify-content-center">
                    <label class="k-radio-label">
                        <input class="k-radio" type="radio">
                    </label>
                    <label class="k-radio-label">
                        <input class="k-radio" type="radio" checked>
                    </label>
                    <label class="k-radio-label">
                        <input class="k-radio" type="radio" disabled>
                    </label>
                </div>
                <div class="mb-3 d-flex justify-content-center">
                    <label class="k-checkbox-label">
                        <input class="k-checkbox" type="checkbox">
                    </label>
                    <label class="k-checkbox-label">
                        <input class="k-checkbox indeterminate" type="checkbox" checked>
                    </label>
                    <label class="k-checkbox-label">
                        <input class="k-checkbox" type="checkbox" checked>
                    </label>
                    <label class="k-checkbox-label">
                        <input class="k-checkbox" type="checkbox" disabled>
                    </label>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">状态</h5>
            <div class="card-body">
                <div class="mb-3">
                    <input class="k-textbox k-state-hover text-center w-100" type="text" placeholder="k-textbox k-state-hover">
                </div>
                <div class="mb-3">
                    <input class="k-textbox k-state-active text-center w-100" type="text" placeholder="k-textbox k-state-active">
                </div>
                <div class="mb-3">
                    <input class="k-textbox k-state-focused text-center w-100" type="text" placeholder="k-textbox k-state-focused">
                </div>
                <div class="mb-3">
                    <input class="k-textbox k-state-disabled text-center w-100" type="text" placeholder="k-textbox k-state-disabled">
                </div>
                <div class="mb-3">
                    <input class="k-textbox k-state-invalid text-center w-100" type="text" placeholder="k-textbox k-state-invalid">
                </div>
                <div class="mb-3">
                    <button class="k-button k-state-hover w-100">k-button k-state-hover</button>
                </div>
                <div class="mb-3">
                    <button class="k-button k-state-active w-100">k-button k-state-active</button>
                </div>
                <div class="mb-3">
                    <button class="k-button k-state-focused w-100">k-button k-state-focused</button>
                </div>
                <div class="mb-3">
                    <button class="k-button k-state-disabled w-100">k-button k-state-disabled</button>
                </div>
                <div class="mb-3">
                    <button class="k-button k-state-selected w-100">k-button k-state-selected</button>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">加载中</h5>
            <div class="card-body text-center">
                <div class="k-panel mb-3">
                    <div class="k-header">k-i-loading</div>
                    <div class="k-i-loading p-3"></div>
                </div>
                <div class="k-panel mb-3">
                    <div class="k-header">k-loading-image</div>
                    <div class="k-loading-image position-relative p-5"></div>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">面板</h5>
            <div class="card-body text-center">
                <div class="k-panel mb-3 p-2">k-panel</div>
                <div class="k-panel k-shadow mb-3 p-2">k-panel k-shadow</div>
                <div class="k-panel k-inset mb-3 p-2">k-panel k-inset</div>
                <div class="k-panel mb-3">
                    <div class="k-header">k-header</div>k-panel
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">翻转</h5>
            <div class="card-body text-center">
                <div class="k-flip-h mb-3 p-2 gray-bg">k-flip-h</div>
                <div class="k-flip-v mb-3 p-2 gray-bg">k-flip-v</div>
                <div class="k-flip-h k-flip-v mb-3 p-2 gray-bg">k-flip-h k-flip-v</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">旋转</h5>
            <div class="card-body text-center">
                <div class="k-rotate-45 mt-3 mb-5 p-2">k-rotate-45</div>
                <div class="k-rotate-90 my-5 p-2">k-rotate-90</div>
                <div class="k-rotate-135 my-5 p-2">k-rotate-135</div>
                <div class="k-rotate-180 my-5 p-2">k-rotate-180</div>
                <div class="k-rotate-225 my-5 p-2">k-rotate-225</div>
                <div class="k-rotate-270 my-5 p-2">k-rotate-270</div>
                <div class="k-rotate-315 mt-5 mb-3 p-2">k-rotate-315</div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">变形</h5>
            <div class="card-body text-center">
                <div class="k-display-flex mb-3">
                    <div class="k-scale-0 p-2 k-flex">k-scale-0</div>
                    <div class="k-scale-1 p-2 k-flex">k-scale-1</div>
                    <div class="k-scale-2 p-2 k-flex">k-scale-2</div>
                </div>
                <div class="k-hbox mb-5">
                    <div class="k-translate-0 p-2 gray-bg w-25">k-translate-0</div>
                    <div class="k-translate-0-50 p-2 gray-bg w-25">k-translate-0-50</div>
                    <div class="k-translate-0-100 p-2 gray-bg w-25">k-translate-0-100</div>
                </div>
                <div class="k-hbox mb-5">
                    <div class="k-translate-50-0 p-2 gray-bg w-25">k-translate-50-0</div>
                    <div class="k-translate-50-50 p-2 gray-bg w-25">k-translate-50-50</div>
                    <div class="k-translate-50-100 p-2 gray-bg w-25">k-translate-50-100</div>
                </div>
                <div class="k-hbox mb-5">
                    <div class="k-translate-100-0 p-2 gray-bg w-25">k-translate-100-0</div>
                    <div class="k-translate-100-50 p-2 gray-bg w-25">k-translate-100-50</div>
                    <div class="k-translate-100-100 p-2 gray-bg w-25">k-translate-100-100</div>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">Flex</h5>
            <div class="card-body text-center">
                <div class="k-display-flex mb-3 p-2 gray-bg k-justify-content-center">k-display-flex</div>
                <div class="k-display-inline-flex mb-3 p-2 gray-bg">k-display-inline-flex</div>
                <div class="k-hbox mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-hbox</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-vbox mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-vbox</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-justify-content-start mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-justify-content-start</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-justify-content-end mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-justify-content-end</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-justify-content-center mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-justify-content-center</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-justify-content-between mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-justify-content-between</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-justify-content-around mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-justify-content-around</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-justify-content-evenly mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-justify-content-evenly</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-items-start mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-items-start</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-items-end mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-items-end</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-items-center mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-items-center</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-items-stretch mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-items-stretch</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-items-baseline mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-items-baseline</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-content-start mb-3 p-2 gray-bg k-flex-wrap k-justify-content-center h100">
                    <div class="border p-2 theme-s-box w-100"></div>
                    <div class="border p-2 theme-s-box w-100">k-align-content-start</div>
                    <div class="border p-2 theme-s-box w-100"></div>
                </div>
                <div class="k-display-flex k-align-content-end mb-3 p-2 gray-bg k-flex-wrap k-justify-content-center h100">
                    <div class="border p-2 theme-s-box w-100"></div>
                    <div class="border p-2 theme-s-box w-100">k-align-content-end</div>
                    <div class="border p-2 theme-s-box w-100"></div>
                </div>
                <div class="k-display-flex k-align-content-center mb-3 p-2 gray-bg k-flex-wrap k-justify-content-center h100">
                    <div class="border p-2 theme-s-box w-100"></div>
                    <div class="border p-2 theme-s-box w-100">k-align-content-center</div>
                    <div class="border p-2 theme-s-box w-100"></div>
                </div>
                <div class="k-display-flex k-align-content-stretch mb-3 p-2 gray-bg k-flex-wrap k-justify-content-center h100">
                    <div class="border p-2 theme-s-box w-100"></div>
                    <div class="border p-2 theme-s-box w-100">k-align-content-stretch</div>
                    <div class="border p-2 theme-s-box w-100"></div>
                </div>
                <div class="k-display-flex k-align-items-baseline mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-align-self-start border p-2 theme-s-bg"></div>
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-self-start</div>
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-align-self-start border p-2 theme-s-bg"></div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-items-baseline mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-align-self-end border p-2 theme-s-bg"></div>
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-self-end</div>
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-align-self-end border p-2 theme-s-bg"></div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-items-baseline mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-align-self-center border p-2 theme-s-bg"></div>
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-self-center</div>
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-align-self-center border p-2 theme-s-bg"></div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-align-items-baseline mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-align-self-stretch border p-2 theme-s-bg"></div>
                    <div class="border p-2 theme-s-box"></div>
                    <div class="border p-2 theme-s-box">k-align-self-stretch</div>
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-align-self-stretch border p-2 theme-s-bg"></div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex mb-3 p-2 gray-bg">
                    <div class="k-flex border p-2 theme-s-box"></div>
                    <div class="k-flex border p-2 theme-s-box">k-flex</div>
                    <div class="k-flex border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-flex-auto border p-2 theme-s-box">k-flex-auto</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-no-flex border p-2 theme-s-box">k-no-flex</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-no-flex-auto border p-2 theme-s-box">k-no-flex-auto</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex mb-3 p-2 gray-bg">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-flex-grow border p-2 theme-s-box">k-flex-grow</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box"></div>
                    <div class="k-no-flex-grow border p-2 theme-s-box">k-no-flex-grow</div>
                    <div class="border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex mb-3 p-2 gray-bg">
                    <div class="w-100 border p-2 theme-s-box"></div>
                    <div class="k-flex-shrink border p-2 theme-s-box">k-flex-shrink</div>
                    <div class="w-100 border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex mb-3 p-2 gray-bg">
                    <div class="w-100 border p-2 theme-s-box"></div>
                    <div class="k-no-flex-shrink border p-2 theme-s-box">k-no-flex-shrink</div>
                    <div class="w-100 border p-2 theme-s-box"></div>
                </div>
                <div class="k-display-flex k-flex-wrap mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box w-50"></div>
                    <div class="border p-2 theme-s-box w-50"></div>
                    <div class="border p-2 theme-s-box w-50">k-flex-wrap</div>
                </div>
                <div class="k-display-flex k-flex-nowrap mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box w-50"></div>
                    <div class="border p-2 theme-s-box w-50">k-flex-nowrap</div>
                    <div class="border p-2 theme-s-box w-50"></div>
                </div>
                <div class="k-display-flex k-flex-wrap-reverse mb-3 p-2 gray-bg k-justify-content-center">
                    <div class="border p-2 theme-s-box w-50"></div>
                    <div class="border p-2 theme-s-box w-50"></div>
                    <div class="border p-2 theme-s-box w-50">k-flex-wrap-reverse</div>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">徽章</h5>
            <div class="card-body text-center">
                <div class="mb-3">
                    <span class="k-badge">k-badge</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-primary">k-badge-primary</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-secondary">k-badge-secondary</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-info">k-badge-info</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-success">k-badge-success</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-warning">k-badge-warning</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-error">k-badge-error</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-outline k-badge-primary">k-badge-outline k-badge-primary</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-outline k-badge-secondary">k-badge-outline k-badge-secondary</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-outline k-badge-info">k-badge-outline k-badge-info</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-outline k-badge-success">k-badge-outline k-badge-success</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-outline k-badge-warning">k-badge-outline k-badge-warning</span>
                </div>
                <div class="mb-3">
                    <span class="k-badge k-badge-outline k-badge-error">k-badge-outline k-badge-error</span>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header">IKKI Amikoko</h5>
            <div class="card-body text-center gray-bg">
                <div class="theme-m mb-2 p-2">theme-m</div>
                <div class="theme-m-bg k-widget mb-2 p-2">theme-m-bg</div>
                <div class="theme-m-txt k-widget mb-2 p-2">theme-m-txt</div>
                <div class="theme-m-box k-widget mb-2 p-2">theme-m-box</div>
                <div class="theme-s mb-2 p-2">theme-s</div>
                <div class="theme-s-bg k-widget mb-2 p-2">theme-s-bg</div>
                <div class="theme-s-txt k-widget mb-2 p-2">theme-s-txt</div>
                <div class="theme-s-box k-widget mb-2 p-2">theme-s-box</div>
                <div class="theme-c mb-2 p-2">theme-c</div>
                <div class="theme-l k-widget mb-2 p-2">theme-l</div>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">图标大小</h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-i-heart"></i>
                    <span>k-icon</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-xs k-i-heart"></i>
                    <span>k-icon-xs</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-sm k-i-heart"></i>
                    <span>k-icon-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-heart"></i>
                    <span>k-icon-md</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-lg k-i-heart"></i>
                    <span>k-icon-lg</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-xl k-i-heart"></i>
                    <span>k-icon-xl</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">图标翻转</h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-i-brush"></i>
                    <span>k-icon</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-flip-h k-i-brush"></i>
                    <span>k-flip-h</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-flip-v k-i-brush"></i>
                    <span>k-flip-v</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-flip-h k-flip-v k-i-brush"></i>
                    <span>k-flip-h k-flip-v</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">图标旋转</h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-rotate-0 k-i-clock"></i>
                    <span>k-rotate-0</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-rotate-45 k-i-clock"></i>
                    <span>k-rotate-45</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-rotate-90 k-i-clock"></i>
                    <span>k-rotate-90</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-rotate-135 k-i-clock"></i>
                    <span>k-rotate-135</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-rotate-180 k-i-clock"></i>
                    <span>k-rotate-180</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-rotate-225 k-i-clock"></i>
                    <span>k-rotate-225</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-rotate-270 k-i-clock"></i>
                    <span>k-rotate-270</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3">
                    <i class="k-icon k-icon-md k-rotate-315 k-i-clock"></i>
                    <span>k-rotate-315</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">布局和导航图标<small class="text-muted ml-2">Layout and Navigation</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-45-up-right"></i>
                    <span class="text-black-50">Unicode: e000</span>
                    <span>k-i-arrow-45-up-right</span>
                    <span>k-i-collapse-ne</span>
                    <span>k-i-resize-ne</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-45-down-right"></i>
                    <span class="text-black-50">Unicode: e001</span>
                    <span>k-i-arrow-45-down-right</span>
                    <span>k-i-collapse-se</span>
                    <span>k-i-resize-se</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-45-down-left"></i>
                    <span class="text-black-50">Unicode: e002</span>
                    <span>k-i-arrow-45-down-left</span>
                    <span>k-i-collapse-sw</span>
                    <span>k-i-resize-sw</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-45-up-left"></i>
                    <span class="text-black-50">Unicode: e003</span>
                    <span>k-i-arrow-45-up-left</span>
                    <span>k-i-collapse-nw</span>
                    <span>k-i-resize-nw</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-60-up"></i>
                    <span class="text-black-50">Unicode: e004</span>
                    <span>k-i-arrow-60-up</span>
                    <span>k-i-arrow-n</span>
                    <span>k-i-sarrow-n</span>
                    <span>k-i-expand-n</span>
                    <span>k-i-kpi-trend-increase</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-60-right"></i>
                    <span class="text-black-50">Unicode: e005</span>
                    <span>k-i-arrow-60-right</span>
                    <span>k-i-arrow-e</span>
                    <span>k-i-sarrow-e</span>
                    <span>k-i-expand-e</span>
                    <span>k-i-expand</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-60-down"></i>
                    <span class="text-black-50">Unicode: e006</span>
                    <span>k-i-arrow-60-down</span>
                    <span>k-i-arrow-s</span>
                    <span>k-i-sarrow-s</span>
                    <span>k-i-expand-s</span>
                    <span>k-i-collapse</span>
                    <span>k-i-kpi-trend-decrease</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-60-left"></i>
                    <span class="text-black-50">Unicode: e007</span>
                    <span>k-i-arrow-60-left</span>
                    <span>k-i-arrow-w</span>
                    <span>k-i-sarrow-w</span>
                    <span>k-i-expand-w</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-end-up"></i>
                    <span class="text-black-50">Unicode: e008</span>
                    <span>k-i-arrow-end-up</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-end-right"></i>
                    <span class="text-black-50">Unicode: e009</span>
                    <span>k-i-arrow-end-right</span>
                    <span>k-i-seek-e</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-end-down"></i>
                    <span class="text-black-50">Unicode: e00a</span>
                    <span>k-i-arrow-end-down</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-end-left"></i>
                    <span class="text-black-50">Unicode: e00b</span>
                    <span>k-i-arrow-end-left</span>
                    <span>k-i-seek-w</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-double-60-up"></i>
                    <span class="text-black-50">Unicode: e00c</span>
                    <span>k-i-arrow-double-60-up</span>
                    <span>k-i-arrow-seek-up</span>
                    <span>k-i-seek-n</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-double-60-right"></i>
                    <span class="text-black-50">Unicode: e00d</span>
                    <span>k-i-arrow-double-60-right</span>
                    <span>k-i-arrow-seek-right</span>
                    <span>k-i-forward-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-double-60-down"></i>
                    <span class="text-black-50">Unicode: e00e</span>
                    <span>k-i-arrow-double-60-down</span>
                    <span>k-i-arrow-seek-down</span>
                    <span>k-i-seek-s</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-double-60-left"></i>
                    <span class="text-black-50">Unicode: e00f</span>
                    <span>k-i-arrow-double-60-left</span>
                    <span>k-i-arrow-seek-left</span>
                    <span>k-i-rewind-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrows-kpi"></i>
                    <span class="text-black-50">Unicode: e010</span>
                    <span>k-i-arrows-kpi</span>
                    <span>k-i-kpi</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrows-no-change"></i>
                    <span class="text-black-50">Unicode: e011</span>
                    <span>k-i-arrows-no-change</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-overflow-down"></i>
                    <span class="text-black-50">Unicode: e012</span>
                    <span>k-i-arrow-overflow-down</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-chevron-up"></i>
                    <span class="text-black-50">Unicode: e013</span>
                    <span>k-i-arrow-chevron-up</span>
                    <span>k-i-arrowhead-n</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-chevron-right"></i>
                    <span class="text-black-50">Unicode: e014</span>
                    <span>k-i-arrow-chevron-right</span>
                    <span>k-i-arrowhead-e</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-chevron-down"></i>
                    <span class="text-black-50">Unicode: e015</span>
                    <span>k-i-arrow-chevron-down</span>
                    <span>k-i-arrowhead-s</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-chevron-left"></i>
                    <span class="text-black-50">Unicode: e016</span>
                    <span>k-i-arrow-chevron-left</span>
                    <span>k-i-arrowhead-w</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-up"></i>
                    <span class="text-black-50">Unicode: e017</span>
                    <span>k-i-arrow-up</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-right"></i>
                    <span class="text-black-50">Unicode: e018</span>
                    <span>k-i-arrow-right</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-down"></i>
                    <span class="text-black-50">Unicode: e019</span>
                    <span>k-i-arrow-down</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-left"></i>
                    <span class="text-black-50">Unicode: e01a</span>
                    <span>k-i-arrow-left</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-drill"></i>
                    <span class="text-black-50">Unicode: e01b</span>
                    <span>k-i-arrow-drill</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-parent"></i>
                    <span class="text-black-50">Unicode: e01c</span>
                    <span>k-i-arrow-parent</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrow-root"></i>
                    <span class="text-black-50">Unicode: e01d</span>
                    <span>k-i-arrow-root</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrows-resizing"></i>
                    <span class="text-black-50">Unicode: e01e</span>
                    <span>k-i-arrows-resizing</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrows-dimensions"></i>
                    <span class="text-black-50">Unicode: e01f</span>
                    <span>k-i-arrows-dimensions</span>
                    <span>k-i-dimension</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-arrows-swap"></i>
                    <span class="text-black-50">Unicode: e020</span>
                    <span>k-i-arrows-swap</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-drag-and-drop"></i>
                    <span class="text-black-50">Unicode: e021</span>
                    <span>k-i-drag-and-drop</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-categorize"></i>
                    <span class="text-black-50">Unicode: e022</span>
                    <span>k-i-categorize</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-grid"></i>
                    <span class="text-black-50">Unicode: e023</span>
                    <span>k-i-grid</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-grid-layout"></i>
                    <span class="text-black-50">Unicode: e024</span>
                    <span>k-i-grid-layout</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-group"></i>
                    <span class="text-black-50">Unicode: e025</span>
                    <span>k-i-group</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-ungroup"></i>
                    <span class="text-black-50">Unicode: e026</span>
                    <span>k-i-ungroup</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-handler-drag"></i>
                    <span class="text-black-50">Unicode: e027</span>
                    <span>k-i-handler-drag</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-layout"></i>
                    <span class="text-black-50">Unicode: e028</span>
                    <span>k-i-layout</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-layout-1-by-4"></i>
                    <span class="text-black-50">Unicode: e029</span>
                    <span>k-i-layout-1-by-4</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-layout-2-by-2"></i>
                    <span class="text-black-50">Unicode: e02a</span>
                    <span>k-i-layout-2-by-2</span>
                    <span>k-i-page-layout</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-layout-side-by-side"></i>
                    <span class="text-black-50">Unicode: e02b</span>
                    <span>k-i-layout-side-by-side</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-layout-stacked"></i>
                    <span class="text-black-50">Unicode: e02c</span>
                    <span>k-i-layout-stacked</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-columns"></i>
                    <span class="text-black-50">Unicode: e02d</span>
                    <span>k-i-columns</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-rows"></i>
                    <span class="text-black-50">Unicode: e02e</span>
                    <span>k-i-rows</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-reorder"></i>
                    <span class="text-black-50">Unicode: e02f</span>
                    <span>k-i-reorder</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-menu"></i>
                    <span class="text-black-50">Unicode: e030</span>
                    <span>k-i-menu</span>
                    <span>k-i-hamburger</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-more-vertical"></i>
                    <span class="text-black-50">Unicode: e031</span>
                    <span>k-i-more-vertical</span>
                    <span>k-i-vbars</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-more-horizontal"></i>
                    <span class="text-black-50">Unicode: e032</span>
                    <span>k-i-more-horizontal</span>
                    <span>k-i-hbars</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-home"></i>
                    <span class="text-black-50">Unicode: e034</span>
                    <span>k-i-home</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">操作图标<small class="text-muted ml-2">Actions</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-undo"></i>
                    <span class="text-black-50">Unicode: e100</span>
                    <span>k-i-undo</span>
                    <span>k-i-undo-large</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-redo"></i>
                    <span class="text-black-50">Unicode: e101</span>
                    <span>k-i-redo</span>
                    <span>k-i-redo-large</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-reset"></i>
                    <span class="text-black-50">Unicode: e102</span>
                    <span>k-i-reset</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-reload"></i>
                    <span class="text-black-50">Unicode: e103</span>
                    <span>k-i-reload</span>
                    <span>k-i-refresh</span>
                    <span>k-i-recurrence</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-refresh-clear"></i>
                    <span class="text-black-50">Unicode: e104</span>
                    <span>k-i-refresh-clear</span>
                    <span>k-i-non-recurrence</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-reset-sm"></i>
                    <span class="text-black-50">Unicode: e105</span>
                    <span>k-i-reset-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-reload-sm"></i>
                    <span class="text-black-50">Unicode: e106</span>
                    <span>k-i-reload-sm</span>
                    <span>k-i-refresh-sm</span>
                    <span>k-i-recurrence-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-clock"></i>
                    <span class="text-black-50">Unicode: e107</span>
                    <span>k-i-clock</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-calendar"></i>
                    <span class="text-black-50">Unicode: e108</span>
                    <span>k-i-calendar</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-save"></i>
                    <span class="text-black-50">Unicode: e109</span>
                    <span>k-i-save</span>
                    <span>k-i-floppy</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-print"></i>
                    <span class="text-black-50">Unicode: e10a</span>
                    <span>k-i-print</span>
                    <span>k-i-printer</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-edit"></i>
                    <span class="text-black-50">Unicode: e10b</span>
                    <span>k-i-edit</span>
                    <span>k-i-pencil</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-delete"></i>
                    <span class="text-black-50">Unicode: e10c</span>
                    <span>k-i-delete</span>
                    <span>k-i-trash</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-attachment"></i>
                    <span class="text-black-50">Unicode: e10d</span>
                    <span>k-i-attachment</span>
                    <span>k-i-clip</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-attachment-45"></i>
                    <span class="text-black-50">Unicode: e10e</span>
                    <span>k-i-attachment-45</span>
                    <span>k-i-clip-45</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-link-horizontal"></i>
                    <span class="text-black-50">Unicode: e10f</span>
                    <span>k-i-link-horizontal</span>
                    <span>k-i-hyperlink</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-unlink-horizontal"></i>
                    <span class="text-black-50">Unicode: e110</span>
                    <span>k-i-unlink-horizontal</span>
                    <span>k-i-hyperlink-remove</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-link-vertical"></i>
                    <span class="text-black-50">Unicode: e111</span>
                    <span>k-i-link-vertical</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-unlink-vertical"></i>
                    <span class="text-black-50">Unicode: e112</span>
                    <span>k-i-unlink-vertical</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-lock"></i>
                    <span class="text-black-50">Unicode: e113</span>
                    <span>k-i-lock</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-unlock"></i>
                    <span class="text-black-50">Unicode: e114</span>
                    <span>k-i-unlock</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cancel"></i>
                    <span class="text-black-50">Unicode: e115</span>
                    <span>k-i-cancel</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cancel-outline"></i>
                    <span class="text-black-50">Unicode: e116</span>
                    <span>k-i-cancel-outline</span>
                    <span>k-i-deny</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cancel-circle"></i>
                    <span class="text-black-50">Unicode: e117</span>
                    <span>k-i-cancel-circle</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-check"></i>
                    <span class="text-black-50">Unicode: e118</span>
                    <span>k-i-check</span>
                    <span>k-i-tick</span>
                    <span>k-i-checkmark</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-check-outline"></i>
                    <span class="text-black-50">Unicode: e119</span>
                    <span>k-i-check-outline</span>
                    <span>k-i-checkmark-outline</span>
                    <span>k-i-success</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-check-circle"></i>
                    <span class="text-black-50">Unicode: e11a</span>
                    <span>k-i-check-circle</span>
                    <span>k-i-checkmark-circle</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-close"></i>
                    <span class="text-black-50">Unicode: e11b</span>
                    <span>k-i-close</span>
                    <span>k-i-group-delete</span>
                    <span>k-i-x</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-close-outline"></i>
                    <span class="text-black-50">Unicode: e11c</span>
                    <span>k-i-close-outline</span>
                    <span>k-i-x-outline</span>
                    <span>k-i-error</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-close-circle"></i>
                    <span class="text-black-50">Unicode: e11d</span>
                    <span>k-i-close-circle</span>
                    <span>k-i-x-circle</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-plus"></i>
                    <span class="text-black-50">Unicode: e11e</span>
                    <span>k-i-plus</span>
                    <span>k-plus</span>
                    <span>k-i-add</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-plus-outline"></i>
                    <span class="text-black-50">Unicode: e11f</span>
                    <span>k-i-plus-outline</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-plus-circle"></i>
                    <span class="text-black-50">Unicode: e120</span>
                    <span>k-i-plus-circle</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-minus"></i>
                    <span class="text-black-50">Unicode: e121</span>
                    <span>k-i-minus</span>
                    <span>k-minus</span>
                    <span>k-i-kpi-trend-equal</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-minus-outline"></i>
                    <span class="text-black-50">Unicode: e122</span>
                    <span>k-i-minus-outline</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-minus-circle"></i>
                    <span class="text-black-50">Unicode: e123</span>
                    <span>k-i-minus-circle</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sort-asc"></i>
                    <span class="text-black-50">Unicode: e124</span>
                    <span>k-i-sort-asc</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sort-desc"></i>
                    <span class="text-black-50">Unicode: e125</span>
                    <span>k-i-sort-desc</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-unsort"></i>
                    <span class="text-black-50">Unicode: e126</span>
                    <span>k-i-unsort</span>
                    <span>k-i-sort-clear</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sort-asc-sm"></i>
                    <span class="text-black-50">Unicode: e127</span>
                    <span>k-i-sort-asc-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sort-desc-sm"></i>
                    <span class="text-black-50">Unicode: e128</span>
                    <span>k-i-sort-desc-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-filter"></i>
                    <span class="text-black-50">Unicode: e129</span>
                    <span>k-i-filter</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-filter-clear"></i>
                    <span class="text-black-50">Unicode: e12a</span>
                    <span>k-i-filter-clear</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-filter-sm"></i>
                    <span class="text-black-50">Unicode: e12b</span>
                    <span>k-i-filter-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-filter-sort-asc-sm"></i>
                    <span class="text-black-50">Unicode: e12c</span>
                    <span>k-i-filter-sort-asc-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-filter-sort-desc-sm"></i>
                    <span class="text-black-50">Unicode: e12d</span>
                    <span>k-i-filter-sort-desc-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-filter-add-expression"></i>
                    <span class="text-black-50">Unicode: e12e</span>
                    <span>k-i-filter-add-expression</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-filter-add-group"></i>
                    <span class="text-black-50">Unicode: e12f</span>
                    <span>k-i-filter-add-group</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-login"></i>
                    <span class="text-black-50">Unicode: e130</span>
                    <span>k-i-login</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-logout"></i>
                    <span class="text-black-50">Unicode: e131</span>
                    <span>k-i-logout</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-download"></i>
                    <span class="text-black-50">Unicode: e132</span>
                    <span>k-i-download</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-upload"></i>
                    <span class="text-black-50">Unicode: e133</span>
                    <span>k-i-upload</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-hyperlink-open"></i>
                    <span class="text-black-50">Unicode: e134</span>
                    <span>k-i-hyperlink-open</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-hyperlink-open-sm"></i>
                    <span class="text-black-50">Unicode: e135</span>
                    <span>k-i-hyperlink-open-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-launch"></i>
                    <span class="text-black-50">Unicode: e136</span>
                    <span>k-i-launch</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-window"></i>
                    <span class="text-black-50">Unicode: e137</span>
                    <span>k-i-window</span>
                    <span>k-i-window-maximize</span>
                    <span>k-i-maximize</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-windows"></i>
                    <span class="text-black-50">Unicode: e138</span>
                    <span>k-i-windows</span>
                    <span>k-i-window-restore</span>
                    <span>k-i-restore</span>
                    <span>k-i-tiles</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-window-minimize"></i>
                    <span class="text-black-50">Unicode: e139</span>
                    <span>k-i-window-minimize</span>
                    <span>k-i-minimize</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-gear"></i>
                    <span class="text-black-50">Unicode: e13a</span>
                    <span>k-i-gear</span>
                    <span>k-i-cog</span>
                    <span>k-i-custom</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-gears"></i>
                    <span class="text-black-50">Unicode: e13b</span>
                    <span>k-i-gears</span>
                    <span>k-i-cogs</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-wrench"></i>
                    <span class="text-black-50">Unicode: e13c</span>
                    <span>k-i-wrench</span>
                    <span>k-i-settings</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-preview"></i>
                    <span class="text-black-50">Unicode: e13d</span>
                    <span>k-i-preview</span>
                    <span>k-i-eye</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-zoom"></i>
                    <span class="text-black-50">Unicode: e13e</span>
                    <span>k-i-zoom</span>
                    <span>k-i-search</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-zoom-in"></i>
                    <span class="text-black-50">Unicode: e13f</span>
                    <span>k-i-zoom-in</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-zoom-out"></i>
                    <span class="text-black-50">Unicode: e140</span>
                    <span>k-i-zoom-out</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-pan"></i>
                    <span class="text-black-50">Unicode: e141</span>
                    <span>k-i-pan</span>
                    <span>k-i-move</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-calculator"></i>
                    <span class="text-black-50">Unicode: e142</span>
                    <span>k-i-calculator</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cart"></i>
                    <span class="text-black-50">Unicode: e143</span>
                    <span>k-i-cart</span>
                    <span>k-i-shopping-cart</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-connector"></i>
                    <span class="text-black-50">Unicode: e144</span>
                    <span>k-i-connector</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-plus-sm"></i>
                    <span class="text-black-50">Unicode: e145</span>
                    <span>k-i-plus-sm</span>
                    <span>k-i-splus</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-minus-sm"></i>
                    <span class="text-black-50">Unicode: e146</span>
                    <span>k-i-minus-sm</span>
                    <span>k-i-sminus</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-kpi-status-deny"></i>
                    <span class="text-black-50">Unicode: e147</span>
                    <span>k-i-kpi-status-deny</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-kpi-status-hold"></i>
                    <span class="text-black-50">Unicode: e148</span>
                    <span>k-i-kpi-status-hold</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-kpi-status-open"></i>
                    <span class="text-black-50">Unicode: e149</span>
                    <span>k-i-kpi-status-open</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-hand"></i>
                    <span class="text-black-50">Unicode: e158</span>
                    <span>k-i-hand</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cursor"></i>
                    <span class="text-black-50">Unicode: e159</span>
                    <span>k-i-cursor</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">媒体图标<small class="text-muted ml-2">Media</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-play"></i>
                    <span class="text-black-50">Unicode: e200</span>
                    <span>k-i-play</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-pause"></i>
                    <span class="text-black-50">Unicode: e201</span>
                    <span>k-i-pause</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-stop"></i>
                    <span class="text-black-50">Unicode: e202</span>
                    <span>k-i-stop</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-rewind"></i>
                    <span class="text-black-50">Unicode: e203</span>
                    <span>k-i-rewind</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-forward"></i>
                    <span class="text-black-50">Unicode: e204</span>
                    <span>k-i-forward</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-volume-down"></i>
                    <span class="text-black-50">Unicode: e205</span>
                    <span>k-i-volume-down</span>
                    <span>k-i-volume-low</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-volume-up"></i>
                    <span class="text-black-50">Unicode: e206</span>
                    <span>k-i-volume-up</span>
                    <span>k-i-volume-high</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-volume-off"></i>
                    <span class="text-black-50">Unicode: e207</span>
                    <span>k-i-volume-off</span>
                    <span>k-i-volume-mute</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-hd"></i>
                    <span class="text-black-50">Unicode: e208</span>
                    <span>k-i-hd</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-subtitles"></i>
                    <span class="text-black-50">Unicode: e209</span>
                    <span>k-i-subtitles</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-playlist"></i>
                    <span class="text-black-50">Unicode: e20a</span>
                    <span>k-i-playlist</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-audio"></i>
                    <span class="text-black-50">Unicode: e20b</span>
                    <span>k-i-audio</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-play-sm"></i>
                    <span class="text-black-50">Unicode: e20c</span>
                    <span>k-i-play-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-pause-sm"></i>
                    <span class="text-black-50">Unicode: e20d</span>
                    <span>k-i-pause-sm</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-stop-sm"></i>
                    <span class="text-black-50">Unicode: e20e</span>
                    <span>k-i-stop-sm</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">切换图标<small class="text-muted ml-2">Toggle</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-heart-outline"></i>
                    <span class="text-black-50">Unicode: e300</span>
                    <span>k-i-heart-outline</span>
                    <span>k-i-fav-outline</span>
                    <span>k-i-favorite-outline</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-heart"></i>
                    <span class="text-black-50">Unicode: e301</span>
                    <span>k-i-heart</span>
                    <span>k-i-fav</span>
                    <span>k-i-favorite</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-star-outline"></i>
                    <span class="text-black-50">Unicode: e302</span>
                    <span>k-i-star-outline</span>
                    <span>k-i-bookmark-outline</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-star"></i>
                    <span class="text-black-50">Unicode: e303</span>
                    <span>k-i-star</span>
                    <span>k-i-bookmark</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-checkbox"></i>
                    <span class="text-black-50">Unicode: e304</span>
                    <span>k-i-checkbox</span>
                    <span>k-i-shape-rect</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-checkbox-checked"></i>
                    <span class="text-black-50">Unicode: e305</span>
                    <span>k-i-checkbox-checked</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-tri-state-indeterminate"></i>
                    <span class="text-black-50">Unicode: e306</span>
                    <span>k-i-tri-state-indeterminate</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-tri-state-null"></i>
                    <span class="text-black-50">Unicode: e307</span>
                    <span>k-i-tri-state-null</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-circle"></i>
                    <span class="text-black-50">Unicode: e308</span>
                    <span>k-i-circle</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-radiobutton"></i>
                    <span class="text-black-50">Unicode: e309</span>
                    <span>k-i-radiobutton</span>
                    <span>k-i-shape-circle</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-radiobutton-checked"></i>
                    <span class="text-black-50">Unicode: e30a</span>
                    <span>k-i-radiobutton-checked</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">警告和通知图标<small class="text-muted ml-2">Alerts and Notifications</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-notification"></i>
                    <span class="text-black-50">Unicode: e400</span>
                    <span>k-i-notification</span>
                    <span>k-i-bell</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-information"></i>
                    <span class="text-black-50">Unicode: e401</span>
                    <span>k-i-information</span>
                    <span>k-i-info</span>
                    <span>k-i-note</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-question"></i>
                    <span class="text-black-50">Unicode: e402</span>
                    <span>k-i-question</span>
                    <span>k-i-help</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-warning"></i>
                    <span class="text-black-50">Unicode: e403</span>
                    <span>k-i-warning</span>
                    <span>k-i-exception</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">图像图标<small class="text-muted ml-2">Images</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-photo-camera"></i>
                    <span class="text-black-50">Unicode: e500</span>
                    <span>k-i-photo-camera</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-image"></i>
                    <span class="text-black-50">Unicode: e501</span>
                    <span>k-i-image</span>
                    <span>k-i-photo</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-image-export"></i>
                    <span class="text-black-50">Unicode: e502</span>
                    <span>k-i-image-export</span>
                    <span>k-i-photo-export</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-zoom-actual-size"></i>
                    <span class="text-black-50">Unicode: e503</span>
                    <span>k-i-zoom-actual-size</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-zoom-best-fit"></i>
                    <span class="text-black-50">Unicode: e504</span>
                    <span>k-i-zoom-best-fit</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-image-resize"></i>
                    <span class="text-black-50">Unicode: e505</span>
                    <span>k-i-image-resize</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-crop"></i>
                    <span class="text-black-50">Unicode: e506</span>
                    <span>k-i-crop</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-mirror"></i>
                    <span class="text-black-50">Unicode: e507</span>
                    <span>k-i-mirror</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-flip-horizontal"></i>
                    <span class="text-black-50">Unicode: e508</span>
                    <span>k-i-flip-horizontal</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-flip-vertical"></i>
                    <span class="text-black-50">Unicode: e509</span>
                    <span>k-i-flip-vertical</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-rotate"></i>
                    <span class="text-black-50">Unicode: e50a</span>
                    <span>k-i-rotate</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-rotate-right"></i>
                    <span class="text-black-50">Unicode: e50b</span>
                    <span>k-i-rotate-right</span>
                    <span>k-i-rotate-cw</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-rotate-left"></i>
                    <span class="text-black-50">Unicode: e50c</span>
                    <span>k-i-rotate-left</span>
                    <span>k-i-rotate-ccw</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-brush"></i>
                    <span class="text-black-50">Unicode: e50d</span>
                    <span>k-i-brush</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-palette"></i>
                    <span class="text-black-50">Unicode: e50e</span>
                    <span>k-i-palette</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paint"></i>
                    <span class="text-black-50">Unicode: e50f</span>
                    <span>k-i-paint</span>
                    <span>k-i-droplet</span>
                    <span>k-i-background</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-line"></i>
                    <span class="text-black-50">Unicode: e510</span>
                    <span>k-i-line</span>
                    <span>k-i-shape-line</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-brightness-contrast"></i>
                    <span class="text-black-50">Unicode: e511</span>
                    <span>k-i-brightness-contrast</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-saturation"></i>
                    <span class="text-black-50">Unicode: e512</span>
                    <span>k-i-saturation</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-invert-colors"></i>
                    <span class="text-black-50">Unicode: e513</span>
                    <span>k-i-invert-colors</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-transperancy"></i>
                    <span class="text-black-50">Unicode: e514</span>
                    <span>k-i-transperancy</span>
                    <span>k-i-opacity</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-greyscale"></i>
                    <span class="text-black-50">Unicode: e515</span>
                    <span>k-i-greyscale</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-blur"></i>
                    <span class="text-black-50">Unicode: e516</span>
                    <span>k-i-blur</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sharpen"></i>
                    <span class="text-black-50">Unicode: e517</span>
                    <span>k-i-sharpen</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-shape"></i>
                    <span class="text-black-50">Unicode: e518</span>
                    <span>k-i-shape</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-round-corners"></i>
                    <span class="text-black-50">Unicode: e519</span>
                    <span>k-i-round-corners</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-front-element"></i>
                    <span class="text-black-50">Unicode: e51a</span>
                    <span>k-i-front-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-back-element"></i>
                    <span class="text-black-50">Unicode: e51b</span>
                    <span>k-i-back-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-forward-element"></i>
                    <span class="text-black-50">Unicode: e51c</span>
                    <span>k-i-forward-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-backward-element"></i>
                    <span class="text-black-50">Unicode: e51d</span>
                    <span>k-i-backward-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-left-element"></i>
                    <span class="text-black-50">Unicode: e51e</span>
                    <span>k-i-align-left-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-center-element"></i>
                    <span class="text-black-50">Unicode: e51f</span>
                    <span>k-i-align-center-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-right-element"></i>
                    <span class="text-black-50">Unicode: e520</span>
                    <span>k-i-align-right-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-top-element"></i>
                    <span class="text-black-50">Unicode: e521</span>
                    <span>k-i-align-top-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-middle-element"></i>
                    <span class="text-black-50">Unicode: e522</span>
                    <span>k-i-align-middle-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-bottom-element"></i>
                    <span class="text-black-50">Unicode: e523</span>
                    <span>k-i-align-bottom-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-thumbnails-up"></i>
                    <span class="text-black-50">Unicode: e524</span>
                    <span>k-i-thumbnails-up</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-thumbnails-right"></i>
                    <span class="text-black-50">Unicode: e525</span>
                    <span>k-i-thumbnails-right</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-thumbnails-down"></i>
                    <span class="text-black-50">Unicode: e526</span>
                    <span>k-i-thumbnails-down</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-thumbnails-left"></i>
                    <span class="text-black-50">Unicode: e527</span>
                    <span>k-i-thumbnails-left</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-full-screen"></i>
                    <span class="text-black-50">Unicode: e528</span>
                    <span>k-i-full-screen</span>
                    <span>k-i-fullscreen-enter</span>
                    <span>k-i-fullscreen</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-full-screen-exit"></i>
                    <span class="text-black-50">Unicode: e529</span>
                    <span>k-i-full-screen-exit</span>
                    <span>k-i-fullscreen-exit</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-reset-color"></i>
                    <span class="text-black-50">Unicode: e52a</span>
                    <span>k-i-reset-color</span>
                    <span>k-i-paint-remove</span>
                    <span>k-i-background-remove</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">编辑图标<small class="text-muted ml-2">Editing</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-page-properties"></i>
                    <span class="text-black-50">Unicode: e600</span>
                    <span>k-i-page-properties</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-bold"></i>
                    <span class="text-black-50">Unicode: e601</span>
                    <span>k-i-bold</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-italic"></i>
                    <span class="text-black-50">Unicode: e602</span>
                    <span>k-i-italic</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-underline"></i>
                    <span class="text-black-50">Unicode: e603</span>
                    <span>k-i-underline</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-font-family"></i>
                    <span class="text-black-50">Unicode: e604</span>
                    <span>k-i-font-family</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-foreground-color"></i>
                    <span class="text-black-50">Unicode: e605</span>
                    <span>k-i-foreground-color</span>
                    <span>k-i-text</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-convert-lowercase"></i>
                    <span class="text-black-50">Unicode: e606</span>
                    <span>k-i-convert-lowercase</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-convert-uppercase"></i>
                    <span class="text-black-50">Unicode: e607</span>
                    <span>k-i-convert-uppercase</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-strikethrough"></i>
                    <span class="text-black-50">Unicode: e608</span>
                    <span>k-i-strikethrough</span>
                    <span>k-i-strike-through</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sub-script"></i>
                    <span class="text-black-50">Unicode: e609</span>
                    <span>k-i-sub-script</span>
                    <span>k-i-subscript</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sup-script"></i>
                    <span class="text-black-50">Unicode: e60a</span>
                    <span>k-i-sup-script</span>
                    <span>k-i-superscript</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-div"></i>
                    <span class="text-black-50">Unicode: e60b</span>
                    <span>k-i-div</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-all"></i>
                    <span class="text-black-50">Unicode: e60c</span>
                    <span>k-i-all</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-h1"></i>
                    <span class="text-black-50">Unicode: e60d</span>
                    <span>k-i-h1</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-h2"></i>
                    <span class="text-black-50">Unicode: e60e</span>
                    <span>k-i-h2</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-h3"></i>
                    <span class="text-black-50">Unicode: e60f</span>
                    <span>k-i-h3</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-h4"></i>
                    <span class="text-black-50">Unicode: e610</span>
                    <span>k-i-h4</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-h5"></i>
                    <span class="text-black-50">Unicode: e611</span>
                    <span>k-i-h5</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-h6"></i>
                    <span class="text-black-50">Unicode: e612</span>
                    <span>k-i-h6</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-list-ordered"></i>
                    <span class="text-black-50">Unicode: e613</span>
                    <span>k-i-list-ordered</span>
                    <span>k-i-insert-ordered-list</span>
                    <span>k-i-list-numbered</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-list-unordered"></i>
                    <span class="text-black-50">Unicode: e614</span>
                    <span>k-i-list-unordered</span>
                    <span>k-i-insert-unordered-list</span>
                    <span>k-i-list-bulleted</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-indent-increase"></i>
                    <span class="text-black-50">Unicode: e615</span>
                    <span>k-i-indent-increase</span>
                    <span>k-i-indent</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-indent-decrease"></i>
                    <span class="text-black-50">Unicode: e616</span>
                    <span>k-i-indent-decrease</span>
                    <span>k-i-outdent</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-insert-up"></i>
                    <span class="text-black-50">Unicode: e617</span>
                    <span>k-i-insert-up</span>
                    <span>k-i-insert-n</span>
                    <span>k-i-insert-top</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-insert-middle"></i>
                    <span class="text-black-50">Unicode: e618</span>
                    <span>k-i-insert-middle</span>
                    <span>k-i-insert-m</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-insert-down"></i>
                    <span class="text-black-50">Unicode: e619</span>
                    <span>k-i-insert-down</span>
                    <span>k-i-insert-s</span>
                    <span>k-i-insert-bottom</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-top"></i>
                    <span class="text-black-50">Unicode: e61a</span>
                    <span>k-i-align-top</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-middle"></i>
                    <span class="text-black-50">Unicode: e61b</span>
                    <span>k-i-align-middle</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-bottom"></i>
                    <span class="text-black-50">Unicode: e61c</span>
                    <span>k-i-align-bottom</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-left"></i>
                    <span class="text-black-50">Unicode: e61d</span>
                    <span>k-i-align-left</span>
                    <span>k-i-justify-left</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-center"></i>
                    <span class="text-black-50">Unicode: e61e</span>
                    <span>k-i-align-center</span>
                    <span>k-i-justify-center</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-right"></i>
                    <span class="text-black-50">Unicode: e61f</span>
                    <span>k-i-align-right</span>
                    <span>k-i-justify-right</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-justify"></i>
                    <span class="text-black-50">Unicode: e620</span>
                    <span>k-i-align-justify</span>
                    <span>k-i-justify-full</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-align-remove"></i>
                    <span class="text-black-50">Unicode: e621</span>
                    <span>k-i-align-remove</span>
                    <span>k-i-justify-clear</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-text-wrap"></i>
                    <span class="text-black-50">Unicode: e622</span>
                    <span>k-i-text-wrap</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-rule-horizontal"></i>
                    <span class="text-black-50">Unicode: e623</span>
                    <span>k-i-rule-horizontal</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-top-left"></i>
                    <span class="text-black-50">Unicode: e624</span>
                    <span>k-i-table-align-top-left</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-top-center"></i>
                    <span class="text-black-50">Unicode: e625</span>
                    <span>k-i-table-align-top-center</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-top-right"></i>
                    <span class="text-black-50">Unicode: e626</span>
                    <span>k-i-table-align-top-right</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-middle-left"></i>
                    <span class="text-black-50">Unicode: e627</span>
                    <span>k-i-table-align-middle-left</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-middle-center"></i>
                    <span class="text-black-50">Unicode: e628</span>
                    <span>k-i-table-align-middle-center</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-middle-right"></i>
                    <span class="text-black-50">Unicode: e629</span>
                    <span>k-i-table-align-middle-right</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-bottom-left"></i>
                    <span class="text-black-50">Unicode: e62a</span>
                    <span>k-i-table-align-bottom-left</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-bottom-center"></i>
                    <span class="text-black-50">Unicode: e62b</span>
                    <span>k-i-table-align-bottom-center</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-bottom-right"></i>
                    <span class="text-black-50">Unicode: e62c</span>
                    <span>k-i-table-align-bottom-right</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-align-remove"></i>
                    <span class="text-black-50">Unicode: e62d</span>
                    <span>k-i-table-align-remove</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-borders-all"></i>
                    <span class="text-black-50">Unicode: e62e</span>
                    <span>k-i-borders-all</span>
                    <span>k-i-all-borders</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-borders-outside"></i>
                    <span class="text-black-50">Unicode: e62f</span>
                    <span>k-i-borders-outside</span>
                    <span>k-i-outside-borders</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-borders-inside"></i>
                    <span class="text-black-50">Unicode: e630</span>
                    <span>k-i-borders-inside</span>
                    <span>k-i-inside-borders</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-borders-inside-horizontal"></i>
                    <span class="text-black-50">Unicode: e631</span>
                    <span>k-i-borders-inside-horizontal</span>
                    <span>k-i-inside-horizontal-borders</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-borders-inside-vertical"></i>
                    <span class="text-black-50">Unicode: e632</span>
                    <span>k-i-borders-inside-vertical</span>
                    <span>k-i-inside-vertical-borders</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-border-top"></i>
                    <span class="text-black-50">Unicode: e633</span>
                    <span>k-i-border-top</span>
                    <span>k-i-top-border</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-border-bottom"></i>
                    <span class="text-black-50">Unicode: e634</span>
                    <span>k-i-border-bottom</span>
                    <span>k-i-bottom-border</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-border-left"></i>
                    <span class="text-black-50">Unicode: e635</span>
                    <span>k-i-border-left</span>
                    <span>k-i-left-border</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-border-right"></i>
                    <span class="text-black-50">Unicode: e636</span>
                    <span>k-i-border-right</span>
                    <span>k-i-right-border</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-border-no"></i>
                    <span class="text-black-50">Unicode: e637</span>
                    <span>k-i-border-no</span>
                    <span>k-i-no-borders</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-borders-show-hide"></i>
                    <span class="text-black-50">Unicode: e638</span>
                    <span>k-i-borders-show-hide</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-form"></i>
                    <span class="text-black-50">Unicode: e639</span>
                    <span>k-i-form</span>
                    <span>k-i-border</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-form-element"></i>
                    <span class="text-black-50">Unicode: e63a</span>
                    <span>k-i-form-element</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-code-snippet"></i>
                    <span class="text-black-50">Unicode: e63b</span>
                    <span>k-i-code-snippet</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-select-all"></i>
                    <span class="text-black-50">Unicode: e63c</span>
                    <span>k-i-select-all</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-button"></i>
                    <span class="text-black-50">Unicode: e63d</span>
                    <span>k-i-button</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-select-box"></i>
                    <span class="text-black-50">Unicode: e63e</span>
                    <span>k-i-select-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-calendar-date"></i>
                    <span class="text-black-50">Unicode: e63f</span>
                    <span>k-i-calendar-date</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-group-box"></i>
                    <span class="text-black-50">Unicode: e640</span>
                    <span>k-i-group-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-textarea"></i>
                    <span class="text-black-50">Unicode: e641</span>
                    <span>k-i-textarea</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-textbox"></i>
                    <span class="text-black-50">Unicode: e642</span>
                    <span>k-i-textbox</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-textbox-hidden"></i>
                    <span class="text-black-50">Unicode: e643</span>
                    <span>k-i-textbox-hidden</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-password"></i>
                    <span class="text-black-50">Unicode: e644</span>
                    <span>k-i-password</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paragraph-add"></i>
                    <span class="text-black-50">Unicode: e645</span>
                    <span>k-i-paragraph-add</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-edit-tools"></i>
                    <span class="text-black-50">Unicode: e646</span>
                    <span>k-i-edit-tools</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-template-manager"></i>
                    <span class="text-black-50">Unicode: e647</span>
                    <span>k-i-template-manager</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-change-manually"></i>
                    <span class="text-black-50">Unicode: e648</span>
                    <span>k-i-change-manually</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-track-changes"></i>
                    <span class="text-black-50">Unicode: e649</span>
                    <span>k-i-track-changes</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-track-changes-enable"></i>
                    <span class="text-black-50">Unicode: e64a</span>
                    <span>k-i-track-changes-enable</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-track-changes-accept"></i>
                    <span class="text-black-50">Unicode: e64b</span>
                    <span>k-i-track-changes-accept</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-track-changes-accept-all"></i>
                    <span class="text-black-50">Unicode: e64c</span>
                    <span>k-i-track-changes-accept-all</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-track-changes-reject"></i>
                    <span class="text-black-50">Unicode: e64d</span>
                    <span>k-i-track-changes-reject</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-track-changes-reject-all"></i>
                    <span class="text-black-50">Unicode: e64e</span>
                    <span>k-i-track-changes-reject-all</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-document-manager"></i>
                    <span class="text-black-50">Unicode: e64f</span>
                    <span>k-i-document-manager</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-custom-icon"></i>
                    <span class="text-black-50">Unicode: e650</span>
                    <span>k-i-custom-icon</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-dictionary-add"></i>
                    <span class="text-black-50">Unicode: e651</span>
                    <span>k-i-dictionary-add</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-image-light-dialog"></i>
                    <span class="text-black-50">Unicode: e652</span>
                    <span>k-i-image-light-dialog</span>
                    <span>k-i-image-insert</span>
                    <span>k-i-insert-image</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-image-edit"></i>
                    <span class="text-black-50">Unicode: e653</span>
                    <span>k-i-image-edit</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-image-map-editor"></i>
                    <span class="text-black-50">Unicode: e654</span>
                    <span>k-i-image-map-editor</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-comment"></i>
                    <span class="text-black-50">Unicode: e655</span>
                    <span>k-i-comment</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-comment-remove"></i>
                    <span class="text-black-50">Unicode: e656</span>
                    <span>k-i-comment-remove</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-comments-remove-all"></i>
                    <span class="text-black-50">Unicode: e657</span>
                    <span>k-i-comments-remove-all</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-silverlight"></i>
                    <span class="text-black-50">Unicode: e658</span>
                    <span>k-i-silverlight</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-media-manager"></i>
                    <span class="text-black-50">Unicode: e659</span>
                    <span>k-i-media-manager</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-video-external"></i>
                    <span class="text-black-50">Unicode: e65a</span>
                    <span>k-i-video-external</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-flash-manager"></i>
                    <span class="text-black-50">Unicode: e65b</span>
                    <span>k-i-flash-manager</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-find-and-replace"></i>
                    <span class="text-black-50">Unicode: e65c</span>
                    <span>k-i-find-and-replace</span>
                    <span>k-i-find</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-copy"></i>
                    <span class="text-black-50">Unicode: e65d</span>
                    <span>k-i-copy</span>
                    <span>k-i-files</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cut"></i>
                    <span class="text-black-50">Unicode: e65e</span>
                    <span>k-i-cut</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paste"></i>
                    <span class="text-black-50">Unicode: e65f</span>
                    <span>k-i-paste</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paste-as-html"></i>
                    <span class="text-black-50">Unicode: e660</span>
                    <span>k-i-paste-as-html</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paste-from-word"></i>
                    <span class="text-black-50">Unicode: e661</span>
                    <span>k-i-paste-from-word</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paste-from-word-strip-file"></i>
                    <span class="text-black-50">Unicode: e662</span>
                    <span>k-i-paste-from-word-strip-file</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paste-html"></i>
                    <span class="text-black-50">Unicode: e663</span>
                    <span>k-i-paste-html</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paste-markdown"></i>
                    <span class="text-black-50">Unicode: e664</span>
                    <span>k-i-paste-markdown</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-paste-plain-text"></i>
                    <span class="text-black-50">Unicode: e665</span>
                    <span>k-i-paste-plain-text</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-apply-format"></i>
                    <span class="text-black-50">Unicode: e666</span>
                    <span>k-i-apply-format</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-clear-css"></i>
                    <span class="text-black-50">Unicode: e667</span>
                    <span>k-i-clear-css</span>
                    <span>k-i-clearformat</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-copy-format"></i>
                    <span class="text-black-50">Unicode: e668</span>
                    <span>k-i-copy-format</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-strip-all-formating"></i>
                    <span class="text-black-50">Unicode: e669</span>
                    <span>k-i-strip-all-formating</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-strip-css-format"></i>
                    <span class="text-black-50">Unicode: e66a</span>
                    <span>k-i-strip-css-format</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-strip-font-elements"></i>
                    <span class="text-black-50">Unicode: e66b</span>
                    <span>k-i-strip-font-elements</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-strip-span-elements"></i>
                    <span class="text-black-50">Unicode: e66c</span>
                    <span>k-i-strip-span-elements</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-strip-word-formatting"></i>
                    <span class="text-black-50">Unicode: e66d</span>
                    <span>k-i-strip-word-formatting</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-format-code-block"></i>
                    <span class="text-black-50">Unicode: e66e</span>
                    <span>k-i-format-code-block</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-style-builder"></i>
                    <span class="text-black-50">Unicode: e66f</span>
                    <span>k-i-style-builder</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-module-manager"></i>
                    <span class="text-black-50">Unicode: e670</span>
                    <span>k-i-module-manager</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-hyperlink-light-dialog"></i>
                    <span class="text-black-50">Unicode: e671</span>
                    <span>k-i-hyperlink-light-dialog</span>
                    <span>k-i-hyperlink-insert</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-hyperlink-globe"></i>
                    <span class="text-black-50">Unicode: e672</span>
                    <span>k-i-hyperlink-globe</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-hyperlink-globe-remove"></i>
                    <span class="text-black-50">Unicode: e673</span>
                    <span>k-i-hyperlink-globe-remove</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-hyperlink-email"></i>
                    <span class="text-black-50">Unicode: e674</span>
                    <span>k-i-hyperlink-email</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-anchor"></i>
                    <span class="text-black-50">Unicode: e675</span>
                    <span>k-i-anchor</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-light-dialog"></i>
                    <span class="text-black-50">Unicode: e676</span>
                    <span>k-i-table-light-dialog</span>
                    <span>k-i-create-table</span>
                    <span>k-i-table-insert</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table"></i>
                    <span class="text-black-50">Unicode: e677</span>
                    <span>k-i-table</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-properties"></i>
                    <span class="text-black-50">Unicode: e678</span>
                    <span>k-i-table-properties</span>
                    <span>k-i-table-wizard</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-cell"></i>
                    <span class="text-black-50">Unicode: e679</span>
                    <span>k-i-table-cell</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-cell-properties"></i>
                    <span class="text-black-50">Unicode: e67a</span>
                    <span>k-i-table-cell-properties</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-column-insert-left"></i>
                    <span class="text-black-50">Unicode: e67b</span>
                    <span>k-i-table-column-insert-left</span>
                    <span>k-i-add-column-left</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-column-insert-right"></i>
                    <span class="text-black-50">Unicode: e67c</span>
                    <span>k-i-table-column-insert-right</span>
                    <span>k-i-add-column-right</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-row-insert-above"></i>
                    <span class="text-black-50">Unicode: e67d</span>
                    <span>k-i-table-row-insert-above</span>
                    <span>k-i-add-row-above</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-row-insert-below"></i>
                    <span class="text-black-50">Unicode: e67e</span>
                    <span>k-i-table-row-insert-below</span>
                    <span>k-i-add-row-below</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-column-delete"></i>
                    <span class="text-black-50">Unicode: e67f</span>
                    <span>k-i-table-column-delete</span>
                    <span>k-i-delete-column</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-row-delete"></i>
                    <span class="text-black-50">Unicode: e680</span>
                    <span>k-i-table-row-delete</span>
                    <span>k-i-delete-row</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-cell-delete"></i>
                    <span class="text-black-50">Unicode: e681</span>
                    <span>k-i-table-cell-delete</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-delete"></i>
                    <span class="text-black-50">Unicode: e682</span>
                    <span>k-i-table-delete</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cells-merge"></i>
                    <span class="text-black-50">Unicode: e683</span>
                    <span>k-i-cells-merge</span>
                    <span>k-i-merge-cells</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cells-merge-horizontally"></i>
                    <span class="text-black-50">Unicode: e684</span>
                    <span>k-i-cells-merge-horizontally</span>
                    <span>k-i-merge-horizontally</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cells-merge-vertically"></i>
                    <span class="text-black-50">Unicode: e685</span>
                    <span>k-i-cells-merge-vertically</span>
                    <span>k-i-merge-vertically</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cell-split-horizontally"></i>
                    <span class="text-black-50">Unicode: e686</span>
                    <span>k-i-cell-split-horizontally</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cell-split-vertically"></i>
                    <span class="text-black-50">Unicode: e687</span>
                    <span>k-i-cell-split-vertically</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-table-unmerge"></i>
                    <span class="text-black-50">Unicode: e688</span>
                    <span>k-i-table-unmerge</span>
                    <span>k-i-normal-layout</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-pane-freeze"></i>
                    <span class="text-black-50">Unicode: e689</span>
                    <span>k-i-pane-freeze</span>
                    <span>k-i-freeze-panes</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-row-freeze"></i>
                    <span class="text-black-50">Unicode: e68a</span>
                    <span>k-i-row-freeze</span>
                    <span>k-i-freeze-row</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-column-freeze"></i>
                    <span class="text-black-50">Unicode: e68b</span>
                    <span>k-i-column-freeze</span>
                    <span>k-i-freeze-col</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-toolbar-float"></i>
                    <span class="text-black-50">Unicode: e68c</span>
                    <span>k-i-toolbar-float</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-spell-checker"></i>
                    <span class="text-black-50">Unicode: e68d</span>
                    <span>k-i-spell-checker</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-validation-xhtml"></i>
                    <span class="text-black-50">Unicode: e68e</span>
                    <span>k-i-validation-xhtml</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-validation-data"></i>
                    <span class="text-black-50">Unicode: e68f</span>
                    <span>k-i-validation-data</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-toggle-full-screen-mode"></i>
                    <span class="text-black-50">Unicode: e690</span>
                    <span>k-i-toggle-full-screen-mode</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-formula-fx"></i>
                    <span class="text-black-50">Unicode: e691</span>
                    <span>k-i-formula-fx</span>
                    <span>k-i-fx</span>
                    <span>k-spreadsheet-formula-bar</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sum"></i>
                    <span class="text-black-50">Unicode: e692</span>
                    <span>k-i-sum</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-symbol"></i>
                    <span class="text-black-50">Unicode: e693</span>
                    <span>k-i-symbol</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-dollar"></i>
                    <span class="text-black-50">Unicode: e694</span>
                    <span>k-i-dollar</span>
                    <span>k-i-currency</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-percent"></i>
                    <span class="text-black-50">Unicode: e695</span>
                    <span>k-i-percent</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-custom-format"></i>
                    <span class="text-black-50">Unicode: e696</span>
                    <span>k-i-custom-format</span>
                    <span>k-i-format-number</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-decimal-increase"></i>
                    <span class="text-black-50">Unicode: e697</span>
                    <span>k-i-decimal-increase</span>
                    <span>k-i-increase-decimal</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-decimal-decrease"></i>
                    <span class="text-black-50">Unicode: e698</span>
                    <span>k-i-decimal-decrease</span>
                    <span>k-i-decrease-decimal</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-font-size"></i>
                    <span class="text-black-50">Unicode: e699</span>
                    <span>k-i-font-size</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-image-absolute-position"></i>
                    <span class="text-black-50">Unicode: e69a</span>
                    <span>k-i-image-absolute-position</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">地图图标<small class="text-muted ml-2">Mapping</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-globe-outline"></i>
                    <span class="text-black-50">Unicode: e700</span>
                    <span>k-i-globe-outline</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-globe"></i>
                    <span class="text-black-50">Unicode: e701</span>
                    <span>k-i-globe</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-marker-pin"></i>
                    <span class="text-black-50">Unicode: e702</span>
                    <span>k-i-marker-pin</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-marker-pin-target"></i>
                    <span class="text-black-50">Unicode: e703</span>
                    <span>k-i-marker-pin-target</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-pin"></i>
                    <span class="text-black-50">Unicode: e704</span>
                    <span>k-i-pin</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-unpin"></i>
                    <span class="text-black-50">Unicode: e705</span>
                    <span>k-i-unpin</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">社交分享图标<small class="text-muted ml-2">Social Sharing</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-share"></i>
                    <span class="text-black-50">Unicode: e800</span>
                    <span>k-i-share</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-user"></i>
                    <span class="text-black-50">Unicode: e801</span>
                    <span>k-i-user</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-inbox"></i>
                    <span class="text-black-50">Unicode: e802</span>
                    <span>k-i-inbox</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-blogger"></i>
                    <span class="text-black-50">Unicode: e803</span>
                    <span>k-i-blogger</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-blogger-box"></i>
                    <span class="text-black-50">Unicode: e804</span>
                    <span>k-i-blogger-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-delicious"></i>
                    <span class="text-black-50">Unicode: e805</span>
                    <span>k-i-delicious</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-delicious-box"></i>
                    <span class="text-black-50">Unicode: e806</span>
                    <span>k-i-delicious-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-digg"></i>
                    <span class="text-black-50">Unicode: e807</span>
                    <span>k-i-digg</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-digg-box"></i>
                    <span class="text-black-50">Unicode: e808</span>
                    <span>k-i-digg-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-email"></i>
                    <span class="text-black-50">Unicode: e809</span>
                    <span>k-i-email</span>
                    <span>k-i-envelop</span>
                    <span>k-i-letter</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-email-box"></i>
                    <span class="text-black-50">Unicode: e80a</span>
                    <span>k-i-email-box</span>
                    <span>k-i-envelop-box</span>
                    <span>k-i-letter-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-facebook"></i>
                    <span class="text-black-50">Unicode: e80b</span>
                    <span>k-i-facebook</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-facebook-box"></i>
                    <span class="text-black-50">Unicode: e80c</span>
                    <span>k-i-facebook-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-google"></i>
                    <span class="text-black-50">Unicode: e80d</span>
                    <span>k-i-google</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-google-box"></i>
                    <span class="text-black-50">Unicode: e80e</span>
                    <span>k-i-google-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-google-plus"></i>
                    <span class="text-black-50">Unicode: e80f</span>
                    <span>k-i-google-plus</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-google-plus-box"></i>
                    <span class="text-black-50">Unicode: e810</span>
                    <span>k-i-google-plus-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-linkedin"></i>
                    <span class="text-black-50">Unicode: e811</span>
                    <span>k-i-linkedin</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-linkedin-box"></i>
                    <span class="text-black-50">Unicode: e812</span>
                    <span>k-i-linkedin-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-myspace"></i>
                    <span class="text-black-50">Unicode: e813</span>
                    <span>k-i-myspace</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-myspace-box"></i>
                    <span class="text-black-50">Unicode: e814</span>
                    <span>k-i-myspace-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-pinterest"></i>
                    <span class="text-black-50">Unicode: e815</span>
                    <span>k-i-pinterest</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-pinterest-box"></i>
                    <span class="text-black-50">Unicode: e816</span>
                    <span>k-i-pinterest-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-reddit"></i>
                    <span class="text-black-50">Unicode: e817</span>
                    <span>k-i-reddit</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-reddit-box"></i>
                    <span class="text-black-50">Unicode: e818</span>
                    <span>k-i-reddit-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-stumble-upon"></i>
                    <span class="text-black-50">Unicode: e819</span>
                    <span>k-i-stumble-upon</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-stumble-upon-box"></i>
                    <span class="text-black-50">Unicode: e81a</span>
                    <span>k-i-stumble-upon-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-tell-a-friend"></i>
                    <span class="text-black-50">Unicode: e81b</span>
                    <span>k-i-tell-a-friend</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-tell-a-friend-box"></i>
                    <span class="text-black-50">Unicode: e81c</span>
                    <span>k-i-tell-a-friend-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-tumblr"></i>
                    <span class="text-black-50">Unicode: e81d</span>
                    <span>k-i-tumblr</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-tumblr-box"></i>
                    <span class="text-black-50">Unicode: e81e</span>
                    <span>k-i-tumblr-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-twitter"></i>
                    <span class="text-black-50">Unicode: e81f</span>
                    <span>k-i-twitter</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-twitter-box"></i>
                    <span class="text-black-50">Unicode: e820</span>
                    <span>k-i-twitter-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-yammer"></i>
                    <span class="text-black-50">Unicode: e821</span>
                    <span>k-i-yammer</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-yammer-box"></i>
                    <span class="text-black-50">Unicode: e822</span>
                    <span>k-i-yammer-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-behance"></i>
                    <span class="text-black-50">Unicode: e823</span>
                    <span>k-i-behance</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-behance-box"></i>
                    <span class="text-black-50">Unicode: e824</span>
                    <span>k-i-behance-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-dribbble"></i>
                    <span class="text-black-50">Unicode: e825</span>
                    <span>k-i-dribbble</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-dribbble-box"></i>
                    <span class="text-black-50">Unicode: e826</span>
                    <span>k-i-dribbble-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-rss"></i>
                    <span class="text-black-50">Unicode: e827</span>
                    <span>k-i-rss</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-rss-box"></i>
                    <span class="text-black-50">Unicode: e828</span>
                    <span>k-i-rss-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-vimeo"></i>
                    <span class="text-black-50">Unicode: e829</span>
                    <span>k-i-vimeo</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-vimeo-box"></i>
                    <span class="text-black-50">Unicode: e82a</span>
                    <span>k-i-vimeo-box</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-youtube"></i>
                    <span class="text-black-50">Unicode: e82b</span>
                    <span>k-i-youtube</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-youtube-box"></i>
                    <span class="text-black-50">Unicode: e82c</span>
                    <span>k-i-youtube-box</span>
                </p>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <h5 class="card-header">文件和文件夹图标<small class="text-muted ml-2">Files and Folders</small></h5>
        <div class="card-body">
            <div class="row">
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-folder"></i>
                    <span class="text-black-50">Unicode: e900</span>
                    <span>k-i-folder</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-folder-open"></i>
                    <span class="text-black-50">Unicode: e901</span>
                    <span>k-i-folder-open</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-folder-add"></i>
                    <span class="text-black-50">Unicode: e902</span>
                    <span>k-i-folder-add</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-folder-up"></i>
                    <span class="text-black-50">Unicode: e903</span>
                    <span>k-i-folder-up</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-folder-more"></i>
                    <span class="text-black-50">Unicode: e904</span>
                    <span>k-i-folder-more</span>
                    <span>k-i-fields-more</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-aggregate-fields"></i>
                    <span class="text-black-50">Unicode: e905</span>
                    <span>k-i-aggregate-fields</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file"></i>
                    <span class="text-black-50">Unicode: e906</span>
                    <span>k-i-file</span>
                    <span>k-i-file-vertical</span>
                    <span>k-i-page-portrait</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-add"></i>
                    <span class="text-black-50">Unicode: e907</span>
                    <span>k-i-file-add</span>
                    <span>k-i-insert-file</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-txt"></i>
                    <span class="text-black-50">Unicode: e908</span>
                    <span>k-i-file-txt</span>
                    <span>k-i-txt</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-csv"></i>
                    <span class="text-black-50">Unicode: e909</span>
                    <span>k-i-file-csv</span>
                    <span>k-i-csv</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-excel"></i>
                    <span class="text-black-50">Unicode: e90a</span>
                    <span>k-i-file-excel</span>
                    <span>k-i-file-xls</span>
                    <span>k-i-excel</span>
                    <span>k-i-xls</span>
                    <span>k-i-xlsa</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-word"></i>
                    <span class="text-black-50">Unicode: e90b</span>
                    <span>k-i-file-word</span>
                    <span>k-i-file-doc</span>
                    <span>k-i-word</span>
                    <span>k-i-doc</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-mdb"></i>
                    <span class="text-black-50">Unicode: e90c</span>
                    <span>k-i-file-mdb</span>
                    <span>k-i-mdb</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-ppt"></i>
                    <span class="text-black-50">Unicode: e90d</span>
                    <span>k-i-file-ppt</span>
                    <span>k-i-ppt</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-pdf"></i>
                    <span class="text-black-50">Unicode: e90e</span>
                    <span>k-i-file-pdf</span>
                    <span>k-i-pdf</span>
                    <span>k-i-pdfa</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-psd"></i>
                    <span class="text-black-50">Unicode: e90f</span>
                    <span>k-i-file-psd</span>
                    <span>k-i-psd</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-flash"></i>
                    <span class="text-black-50">Unicode: e910</span>
                    <span>k-i-file-flash</span>
                    <span>k-i-flash</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-config"></i>
                    <span class="text-black-50">Unicode: e911</span>
                    <span>k-i-file-config</span>
                    <span>k-i-config</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-ascx"></i>
                    <span class="text-black-50">Unicode: e912</span>
                    <span>k-i-file-ascx</span>
                    <span>k-i-ascx</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-bac"></i>
                    <span class="text-black-50">Unicode: e913</span>
                    <span>k-i-file-bac</span>
                    <span>k-i-bac</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-zip"></i>
                    <span class="text-black-50">Unicode: e914</span>
                    <span>k-i-file-zip</span>
                    <span>k-i-zip</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-film"></i>
                    <span class="text-black-50">Unicode: e915</span>
                    <span>k-i-film</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-css3"></i>
                    <span class="text-black-50">Unicode: e916</span>
                    <span>k-i-css3</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-html5"></i>
                    <span class="text-black-50">Unicode: e917</span>
                    <span>k-i-html5</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-html"></i>
                    <span class="text-black-50">Unicode: e918</span>
                    <span>k-i-html</span>
                    <span>k-i-source-code</span>
                    <span>k-i-view-source</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-css"></i>
                    <span class="text-black-50">Unicode: e919</span>
                    <span>k-i-css</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-js"></i>
                    <span class="text-black-50">Unicode: e91a</span>
                    <span>k-i-js</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-exe"></i>
                    <span class="text-black-50">Unicode: e91b</span>
                    <span>k-i-exe</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-csproj"></i>
                    <span class="text-black-50">Unicode: e91c</span>
                    <span>k-i-csproj</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-vbproj"></i>
                    <span class="text-black-50">Unicode: e91d</span>
                    <span>k-i-vbproj</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cs"></i>
                    <span class="text-black-50">Unicode: e91e</span>
                    <span>k-i-cs</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-vb"></i>
                    <span class="text-black-50">Unicode: e91f</span>
                    <span>k-i-vb</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-sln"></i>
                    <span class="text-black-50">Unicode: e920</span>
                    <span>k-i-sln</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-cloud"></i>
                    <span class="text-black-50">Unicode: e921</span>
                    <span>k-i-cloud</span>
                </p>
                <p class="d-flex flex-column align-items-center col-6 col-md-3 col-lg-2">
                    <i class="k-icon k-icon-md k-i-file-horizontal"></i>
                    <span class="text-black-50">Unicode: e922</span>
                    <span>k-i-file-horizontal</span>
                    <span>k-i-page-landscape</span>
                </p>
            </div>
        </div>
    </div>
    <style scoped>
        .gray-bg {
            background-color: #e5e5e5;
        }
        .h100 {
            height: 100px;
        }
    </style>
</script>